﻿@using Moonglade.Core
@using Moonglade.DateTimeOps

@model PostSlugViewModelWrapper
@inject IDateTimeResolver DateTimeResolver

@{
    ViewBag.ShowBloggerIntroInXS = true;
    ViewBag.BodyClass = "body-post-slug";
    var ec = Settings.Value.Editor;
}

@section keywords {
    @if (Model.PostModel.Tags.Length > 0)
    {
        <meta name="keywords" content="@string.Join(", ", Model.PostModel.Tags.Select(t => t.NormalizedName))" />
    }
}

@section meta {
    @if (!Model.PostModel.ExposedToSiteMap)
    {
        <meta name="robots" content="noindex, nofollow" />
    }

    <meta name="title" content="@Model.PostModel.Title" />
    <meta name="displaydate" content="@Model.PostModel.PubDateUtc.GetValueOrDefault().ToString("u")">
    <meta name="copyright" content="(C) @Model.PostModel.PubDateUtc.GetValueOrDefault().Year @BlogConfig.GeneralSettings.SiteTitle">
    <meta name="author" content="@BlogConfig.GeneralSettings.OwnerName" />
}

@if (BlogConfig.AdvancedSettings.EnableOpenGraph)
{
    @section opengraph{
        <meta property="og:site_name" content="@BlogConfig.GeneralSettings.SiteTitle">
        <meta property="og:title" content="@Model.PostModel.Title">
        <meta property="og:type" content="article" />
        <meta property="og:description" content="@Model.PostModel.ContentAbstract" />
        @if (!string.IsNullOrWhiteSpace(BlogConfig.GeneralSettings.CanonicalPrefix))
        {
            <meta property="og:url" content="@(Utils.ResolveCanonicalUrl(BlogConfig.GeneralSettings.CanonicalPrefix, Context.Request.Path))" />
        }
    }
}

@section metadescription{
    <meta name="description" content="@Model.PostModel.ContentAbstract" />
}

@section scripts {
    <script src="~/js/3rd/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/js/3rd/highlight.pack.js"></script>
    <script>
        $(function() {
            var pid = $("article").data("postid");

            postSlug.registerRatingButtons(pid);
            postSlug.resizeImages();
            postSlug.applyImageZooming();
            postSlug.renderCodeHighlighter();

            @if (BlogConfig.SecuritySettings.WarnExternalLink)
            {
                <text>
                    postSlug.warnExtLink();
                </text>
            }

            @if (null == ViewBag.IsDraftPreview)
            {
                <text>
                    $("#img-captcha").click(function() {
                        postSlug.resetCaptchaImage();
                    });

                    ajaxPostWithCSRFToken("/post/hit",
                        { postId: pid },
                        function(data) {
                            console.info("updated post hit");
                        });

                    $('#post-qrcode').qrcode(document.URL);
                </text>
            }
        });
    </script>
}

@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
    <div class="alert alert-danger">
        @ViewBag.ErrorMessage
    </div>
}

@if (null != ViewBag.IsDraftPreview)
{
    <div class="alert alert-info">
        @Localizer["This is a preview for draft content."]
    </div>
}

<article class="article-post-slug box border mb-4" data-postid="@Model.PostModel.Id" lang="@Model.PostModel.ContentLanguageCode">
    <header class="post-header">
        <h1 class="post-title">
            @Model.PostModel.Title
        </h1>
        <hr class="d-none d-md-block post-header-hr" />

        <div class="d-block d-sm-none">
            <div class="post-publish-info post-publish-info-mobile bg-light">
                <time datetime="@Model.PostModel.PubDateUtc.GetValueOrDefault().ToString("u")" title="GMT @Model.PostModel.PubDateUtc">
                    @DateTimeResolver.ToTimeZone(Model.PostModel.PubDateUtc.GetValueOrDefault()).ToString("MM/dd/yyyy")
                </time>
                <span>
                    | @BlogConfig.GeneralSettings.TimeZoneId
                </span>
            </div>
        </div>

        <div class="d-none d-md-block post-publish-info mb-2">
            <strong class="text-muted">
                <time datetime="@Model.PostModel.PubDateUtc.GetValueOrDefault().ToString("u")" title="GMT @Model.PostModel.PubDateUtc">@DateTimeResolver.ToTimeZone(Model.PostModel.PubDateUtc.GetValueOrDefault()).ToString("MM/dd/yyyy")</time>
                @if (Model.PostModel.LastModifyOnUtc.HasValue)
                {
                    <span>(@Localizer["Edit on"] @DateTimeResolver.ToTimeZone(Model.PostModel.LastModifyOnUtc.Value).ToString("MM/dd/yyyy HH:mm"))</span>
                }
                | @BlogConfig.GeneralSettings.TimeZoneId
            </strong>
            <span class="text-muted float-right post-hit-number">@Model.PostModel.Hits @Localizer["Reads"]</span>
        </div>

        <div class="hidden-print">
            <section class="post-cat-tag-info">
                <div class="float-right d-none d-md-block">
                    @if (Model.PostModel.Tags.Length > 0)
                    {
                        <span class="toptags-list">
                            @foreach (var item in Model.PostModel.Tags)
                            {
                                <a asp-controller="Tags"
                                   asp-action="List"
                                   asp-route-normalizedName="@item.NormalizedName" class="text-white">@item.DisplayName</a>
                            }
                        </span>
                    }
                </div>
                @if (Model.PostModel.Categories.Length > 0)
                {
                    <ul class="d-flex flex-row list-unstyled ul-cat-list-desktop mb-0">
                        @foreach (var item in Model.PostModel.Categories)
                        {
                            <li>
                                <a class="btn btn-sm btn-outline-success"
                                   asp-controller="Category"
                                   asp-action="List"
                                   asp-route-routeName="@item.RouteName.ToLower()">
                                    <span class="icon-folder" aria-hidden="true"></span>
                                    @item.DisplayName
                                </a>
                            </li>
                        }
                    </ul>
                }
            </section>
        </div>

        <hr class="post-header-hr" />
    </header>
    <section class="post-content clearfix">
        @if (ec == EditorChoice.Markdown)
        {
            @Html.Raw(Utils.MarkdownToContent(Model.PostModel.RawPostContent, Utils.MarkdownConvertType.Html, false))
        }
        else
        {
            @Html.Raw(Model.PostModel.RawPostContent)
        }
    </section>
    @if (BlogConfig.ContentSettings.ShowPostFooter)
    {
        <section class="post-footer clearfix">
            @Html.Raw(BlogConfig.ContentSettings.PostFooterHtmlPitch)
        </section>
    }
    @if (null == ViewBag.IsDraftPreview)
    {
        <partial name="_PostSlugActions" />
    }

    <div class="tag-mobile d-block d-sm-none">
        <hr />
        @if (Model.PostModel.Tags.Length > 0)
        {
            <span class="toptags-list toptags-list-sm">
                @foreach (var item in Model.PostModel.Tags)
                {
                    <a asp-controller="Tags"
                       asp-action="List"
                       asp-route-normalizedName="@item.NormalizedName">@item.DisplayName</a>
                }
            </span>
        }
    </div>
</article>

@if (null == ViewBag.IsDraftPreview)
{
    <div class="hidden-print">
        @if (BlogConfig.ContentSettings.EnableComments)
        {
            if (Model.PostModel.CommentEnabled)
            {
                <div class="card bg-light comment-form-containter mb-4">
                    <div class="card-header">
                        @Localizer["Comments"]
                        <span class="badge badge-secondary float-right">@Model.PostModel.CommentCount</span>
                    </div>
                    <form id="form-comment" asp-controller="Comment" asp-action="NewComment"
                          data-ajax-begin="onCommentBegin"
                          data-ajax-complete="onCommentComplete"
                          data-ajax-failure="onCommentFailed"
                          data-ajax-success="onCommentSuccess"
                          data-ajax="true"
                          data-ajax-method="POST">
                        <div class="card-body">
                            <input type="hidden" asp-for="NewCommentViewModel.PostId" />
                            <div class="row form-group">
                                <div class="col-md-4">
                                    <input type="text"
                                           class="form-control"
                                           placeholder="Your name"
                                           asp-for="NewCommentViewModel.Username"
                                           required />
                                </div>
                                <div class="col-md-8">
                                    <input type="email"
                                           class="form-control"
                                           placeholder="Email (Optional)"
                                           asp-for="NewCommentViewModel.Email"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           title="@Localizer["Providing your email address can enable blog admin to send notifications for replying your comment. Your email address will also be used to show Gravatar if it has one."]" />
                                </div>
                            </div>
                            <div class="comment-md-content form-group">
                                <textarea asp-for="NewCommentViewModel.Content"
                                          class="form-control"
                                          cols="60"
                                          rows="4"
                                          placeholder="@Localizer["Your comments (Markdown supported)"]"
                                          maxlength="1024"
                                          required></textarea>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <img id="img-captcha" src="@Url.Action("GetCaptchaImage", "Assets")" data-toggle="tooltip" data-placement="top" title="@Localizer["Can't read? Click to change another image."]" />
                                        </div>
                                        <input type="text"
                                               asp-for="NewCommentViewModel.CaptchaCode"
                                               class="form-control"
                                               placeholder="Captcha Code"
                                               autocomplete="off"
                                               minlength="4"
                                               maxlength="4"
                                               required />
                                    </div>
                                </div>
                                <div class="col">
                                    <button id="btn-submit-comment" type="submit" class="btn btn-success float-right">
                                        @Localizer["Submit"]
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            }
            else
            {
                <div class="alert alert-warning">@Localizer["Comment of this post is disabled."]</div>
            }
        }
        else
        {
            <div class="alert alert-warning">@Localizer["Comment is disabled by blog administrator."]</div>
        }

        <div id="loadingIndicator" style="display: none;" class="mb-4">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    <span class="sr-only">@Localizer["Processing..."]</span>
                </div>
            </div>
        </div>

        <div id="thx-for-comment" class="alert alert-warning" style="display: none;">
            @Localizer["Thanks, your comment is pending approval now."] <br />
            @Localizer["It will show up once blog administrator approved your comment."]
        </div>

        <div id="thx-for-comment-non-review" class="alert alert-success" style="display: none;">
            @Localizer["Thanks for your comment."] <br />
            @Localizer["Refresh the page to see your comment."]
        </div>

        @if (Model.PostModel.CommentCount > 0)
        {
            <section id="comments-list">
                @await Component.InvokeAsync("CommentList", new { postId = Model.PostModel.Id })
            </section>
        }
    </div>
}

<partial name="_LightSwitch" />

<div class="modal fade" id="imgzoomModal" tabindex="-1" role="dialog" aria-labelledby="imgzoomModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-imgzoom" role="document">
        <div class="modal-content">
            <img id="imgzoom" alt="imgzoom" />
        </div>
    </div>
</div>

@if (BlogConfig.SecuritySettings.WarnExternalLink)
{
    <div class="modal fade" id="externalLinkModal" tabindex="-1" role="dialog" aria-labelledby="externalLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-externalLink" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">External Link Warning</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>You are about to leave this website and go to this external link. We are not responsible for any content or malicious behaviours of this link. Please confirm before continue browsing the link.</p>
                    <p id="extlink-url"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="extlink-continue" href="#" target="_blank" class="btn btn-primary">Continue</a>
                </div>
            </div>
        </div>
    </div>
}